<template lang="html">
  <div class="contect">
    <banner :imgUrl="imgUrl"></banner>
    <div class="contect-wrapper">
      <div class="top">
        <div class="title">
          <h2>联系我们</h2>
        </div>
        <p>走进社区，服务于广大业主，为政府、业委会排忧解难，市场的需求年年递增，我们云耐信息始终保持着健康、良好、稳步、持续的发展势头。</p>
        <ul>
          <li>
            <i class="iconfont icon-dianhua"></i>
            <span>联系电话：0571-88387680</span>
          </li>
          <li>
            <i class="iconfont icon-dizhi"></i>
            <span>公司地址：杭州市下城区善贤路4号</span>
          </li>
          <li>
            <i class="iconfont icon-youxiang"></i>
            <span>电子邮箱：wyzxlyl@163.com</span>
          </li>
        </ul>
      </div>
      <div class="center">
        <div id="allmap" ></div>
      </div>
      <div class="bottom">
        <div class="left">
          <h2>联系我们</h2>
          <ul>
            <li>电话：0571-88387680</li>
            <li>地址：杭州市下城区善贤路4号3楼351室</li>
            <li>邮箱：wyzxlyl@163.com</li>
          </ul>
        </div>
        <div class="right">
          <form class="" @submit.stop.prevent>
            <div>
              <label for="username" class="same-label">姓名：</label>
              <input type="text" id="username" v-model="username">
            </div>
            <div>
              <label for="tel" class="same-label">邮箱：</label>
              <input type="text" id="email" v-model="email">
            </div>
            <div>
              <label for="detail">留言：</label>
              <textarea id="detail" v-model="message"></textarea>
            </div>
            <div>
              <el-button :plain="true" @click="postMessage">提交</el-button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {postMessage} from 'api/contect.js'
import Banner from 'components/index/banner/banner'

import {MP} from 'common/js/map.js'

export default {
  data() {
    return {
      imgUrl: require('./banner.jpg'),
      isDisabled: true,
      username: '',
      email: '',
      message: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      MP('yo1HWWWzDg3HE2APFDWhwSAGZKX6GYUi').then(BMap => {
        let map = new BMap.Map('allmap')  // 创建Map实例
        map.centerAndZoom(new BMap.Point(120.179399, 30.320485), 20)
        var local = new BMap.LocalSearch(map, {
          renderOptions: {map: map, panel: 'r-result'}
        })
        local.search('杭州云耐信息技术有限公司')
      })
    })
  },
  methods: {
    postMessage() {
      if (this._check(this.username, this.email, this.message)) {
        postMessage(this.email, this.username, this.message).then((res) => {
          this.username = ''
          this.email = ''
          this.message = ''
          this.$message({
            type: 'success',
            message: '留言发送成功，等待工作人员审核'
          })
        })
      }
    },
    _check(username, email, message) {
      let usernameLen = username.length
      let emailLen = email.length
      let contentLen = message.length
      let reg = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
      // 验证姓名
      if (usernameLen === 0) {
        this.$message({
          type: 'error',
          message: '请输入您的姓名'
        })
        return
      } else if (usernameLen < 2 || usernameLen > 6) {
        this.$message({
          type: 'error',
          message: '用户名的长度不能小于两位或者大于六位，请检查'
        })
        return
      }
      // 验证邮箱
      if (emailLen === 0) {
        this.$message({
          type: 'error',
          message: '请输入邮箱'
        })
        return
      } else if (!reg.test(email)) {
        this.$message({
          type: 'error',
          message: '请输入正确的邮箱地址'
        })
        return
      }
      // 验证内容
      if (contentLen === 0) {
        this.$message({
          type: 'error',
          message: '请输入内容'
        })
        return
      }
      return true
    }
  },
  components: {
    Banner
  }
}
</script>

<style lang="scss">
@import url('//at.alicdn.com/t/font_389924_yhf32bd1upzxgvi.css');
.contect{
  width: 100%;
  .contect-wrapper{
    width: 1200px;
    margin:0 auto;
    .top{
      .title{
        display: flex;
        justify-content: center;
        align-items: center;
        h2{
          font-size: 36px;
          line-height: 45px;
          border-bottom: 2px solid #2a507e;
          padding-bottom: 10px;
          margin-bottom: 22px;
        }
      }
      p{
        font-size: 16px;
        text-align: center;
        line-height: 16px;
        margin-bottom: 100px;
      }
      ul{
          display: flex;
          justify-content: space-around;
          text-align: center;
          margin-bottom: 80px;
          li{
            display: flex;
            flex-direction: column;
            i{
              font-size: 90px;
              line-height: 90px;
              margin-bottom: 30px;
            }
          }
      }
    }
    .center{
      height: 360px;
      width: 100%;
      // background: #504f4f;
      margin-bottom: 60px;
    }
    .bottom{
      width: 100%;
      margin-bottom: 60px;
      background: url("./contentus.png");
      height: 575px;
      display: flex;
      box-sizing: border-box;
      padding:50px 50px 0 20px;
      .left{
        margin-right: 320px;
        h2{
          font-size: 36px;
          line-height: 46px;
          margin-bottom: 60px;
        }
        ul{
          font-size: 18px;
          li{
            margin-bottom: 74px;
          }
        }
      }
      .right{
        font-size: 22px;
        form{
          margin-top: 16px;
          &>div{
            margin-bottom: 50px;
            display: flex;
            label{
              position: relative;
              top: 4px;
              font-size: 18px;
            }
            .same-label{
              top:11px;
            }
            input{
              width: 354px;
              height: 40px;
              background: #fff;
              padding:10px;
              box-sizing: border-box;
              border: 1px solid #e1e3e3;
              outline: none;
            }
            textarea{
              width: 354px;
              height: 210px;
              background: #fff;
              border: 1px solid #e1e3e3;
              padding:10px;
              box-sizing: border-box;
              resize: none;
              outline: none;
            }
            button{
              width: 100px;
              height: 40px;
              background: #ccc;
              font-size: 20px;
              position: relative;
              left: 66px;
              top: -20px;
              color: #fff;
              outline: none;
            }
          }
        }
      }
    }
  }
}
#allmap{
  width: 100%;
  height: 100%;
}


</style>
